<template>
  <div class="tab-container">
    <table>
      <!-- 表头 -->
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>当前分数</th>
        <th>分数波动</th>
      </tr>

      <!-- 表格数据行 -->
      <tr v-for="(item, index) in tableData" :key="index">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.score }}</td>
        <td :class="{ positive: item.change >= 0 }">{{ item.change >= 0 ? '+' : '' }}{{ item.change }}%</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: '01', name: '何均超', score: 45, change: 12 },
        { id: '02', name: '任庭菊', score: 68, change: 3.33 },
        { id: '03', name: '李昭', score: 50, change: 10 },
        { id: '04', name: '唐小龙', score: 80, change: 8 },
        { id: '05', name: '王玉珍', score: 12, change: 6 },
      ],
    }
  },
}
</script>

<style lang="less" scoped>
.tab-container {
  width: 3.8rem;
  height: 1.8rem;
  margin-top: 0.6rem;
  //padding: 0.05rem 0;

  table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;

    th {
      color: #dff9ff;
      font-size: 14px;
      padding: 0.1rem 0 0.06rem 0.1rem;
      text-align: center;
    }

    td {
      padding: 0.08rem 0 0.06rem 0.1rem;
      color: #fff;
      text-align: center;
      vertical-align: middle;
      font-size: 14px;
    }
    tr {
    }

    /* 核心样式：偶数行背景 */
    tr:nth-child(even) {
      //background: linear-gradient(90deg, #018ffc 0%, rgba(1, 143, 252, 0.3) 100%);
      background: linear-gradient(90deg, #018ffc 0%, rgba(1, 143, 252, 0.3) 100%);
      /* 可选：添加圆角 */
      td:first-child {
        border-radius: 18px 0 0 18px;
      }
      td:last-child {
        border-radius: 0 18px 18px 0;
      }
    }

    /* 分数波动颜色 */
    .positive {
      color: #ff4d4f;
    }
  }
}
</style>
